<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单页</title>
    <link rel="stylesheet" href="./css/form.css">
    <link rel="stylesheet" media="screen" href="css/particle.css">
</head>

<body>
    <nav class="fixed">
        <div class="layout clearfix">
            <a href="#" class="logo iconfont icon-zhentanjianying">
            <img src="images/emoji-7.png" alt="">
        </a>
             <ul class="nav-list clearfix">
                <li>
                    <a href="index.html">
                        <span>主页</span>
                    </a>
                </li>
                <li>
                    <a href="form.html">表单页</a>
                </li>
                <li>
                    <a href="favorites.html">我的爱好</a>
                </li>
                <li>
                    <a href="work.html">我的作品</a>
                </li>

            </ul>
        </div>
    </nav>
    <header class="header">
        <div id="particles-js">

        </div>
        <div class="title">
            <h1>表单页</h1>
            <h5>向我介绍一下你吧~</h5>
        </div>
    </header>
    <article class="article">
        <div class="layout">
            <table class="table">
                <form action="">
                  
                    <tbody>
                        <tr>
                            <td class="left">你的名字</td>
                            <td class="right">
                                <input type="text" id="user" name="user" onmouseover="focus()" value="" /> &nbsp;*
                            </td>
                        </tr>

                        <tr>
                            <td class="left">性别</td>
                            <td class="right">
                                <input type="radio" name="sex" value="male">男
                                <input type="radio" name="sex" value="female">女
                            </td>
                        </tr>


                        <tr>
                            <td class="left">你的生日</td>
                            <td class="right">
                                <input type="date" />
                            </td>

                        </tr>

                        <tr>
                            <td class="left">你的地址</td>
                            <td class="right">
                                <input type="text" value="" name="address" />
                            </td>
                        </tr>

                        <tr>
                            <td class="left">你的电话</td>
                            <td class="right">
                                <input type="text" name="telephone" id="telephone" />
                            </td>
                        </tr>

                        <tr>
                            <td class="left">你的E-mail</td>
                            <td class="right">

                                <input type="text" id="email" value="" name="e-mail" />

                            </td>
                        </tr>

                        <tr>
                            <td class="left">经常访问的网站</td>
                            <td class="right">
                                <select class="month" name="web">
      <option value="1">新浪</option>
      <option value="2">腾讯</option>
      <option value="3">百度</option>
      <option value="4">淘宝</option>
      <option value="5">慕课</option>
      <option value="6">网易云</option>
      </select>
                            </td>
                        </tr>

                        <tr>
                            <td class="left">个人爱好</td>
                            <td class="right">
                                <input type="checkbox" name="vehicle" value="dsh" />读书
                                <input type="checkbox" name="vehicle" value="yy" />游泳
                                <input type="checkbox" name="vehicle" value="cg" />唱歌
                                <input type="checkbox" name="vehicle" value="tw" />跳舞
                            </td>
                        </tr>

                        <tr>
                            <td class="left">备注</td>
                            <td class="right">
                                <textarea name="bz">
         </textarea>
                            </td>
                        </tr>

                        <tr>
                            <td class="left"></td>
                            <td class="right">
                                <button class="button" onClick="checkform()">
                                    <span>提交</span>
                                </button>
                                <!--<input type="submit" value="提交" id="submit" name="submit"  />-->
                                <!--<input type="reset" class="button-static"  id="reset" value="重置" />-->
                            </td>
                        </tr>

                        <tr>
                            <td class="left"></td>
                            <td class="right">
                                <p>(有*号的为必填项)</p>
                            </td>
                        </tr>

                    </tbody>
                </form>

            </table>
        </div>

    </article>
   
</body>
<!-- scripts -->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>

<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script>
    var count_particles, stats, update;
    stats = new Stats;
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    count_particles = document.querySelector('.js-count-particles');
    update = function () {
        stats.begin();
        stats.end();
        if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
            count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
        }
        requestAnimationFrame(update);
    };
    requestAnimationFrame(update);

</script>

<script>
    $('.button').mousemove(function(e){
        console.log(11)
          const x = e.pageX - e.target.offsetLeft
    const y = e.pageY - e.target.offsetTop
    console.log($(e.target))
    e.target.style.setProperty('--x', `${ x }px`)
    e.target.style.setProperty('--y', `${ y }px`)
    })
  
</script>

</html>